﻿@model CategoryNavigationModel
@using Nop.Web.Models.Catalog;

@functions{
    public bool BreadCrumbContainsCurrentCategoryId(CategoryNavigationModel.CategoryModel category)
    {
        if (Model.CurrentCategoryId == 0)
            return false;

        if (category.Id == Model.CurrentCategoryId)
            return true;

        foreach (var subCategory in category.SubCategories)
        {
            if (BreadCrumbContainsCurrentCategoryId(subCategory))
            {
                return true;
            }
        }

        return false;
    }
}
@helper RenderCategoryLine(CategoryNavigationModel.CategoryModel category)
{
    <li class="@category.Id">
        <a href="@Url.RouteUrl("Category", new { SeName = category.SeName })">@category.Name
            @if (category.NumberOfProducts.HasValue)
            {
                <text> (@(category.NumberOfProducts.Value))</text>
            }
        </a>
        @if (category.SubCategories.Count > 0)
        {
            <div class="Flyout Flyout-@category.Id">
                @foreach (var subCategory in category.SubCategories)
                {
                    <div class="column">
                        <div class="title @subCategory.Id"><a href="@Url.RouteUrl("Category", new { SeName = subCategory.SeName })">@subCategory.Name</a></div>
                        <ul>
                            @foreach (var Level3Category in subCategory.SubCategories)
                            {
                                <li class="@Level3Category.Id"><a href="@Url.RouteUrl("Category", new { SeName = Level3Category.SeName })">@Level3Category.Name</a></li>
                            }
                        </ul>
                    </div>
                }
            </div>
        }
    </li>
}
@if (Model.Categories.Count > 0)
{
    <ul class="SubMenu">
        @foreach (var category in Model.Categories)
        {
            @RenderCategoryLine(category)
                }
    </ul>
}

@foreach (var category in Model.Categories)
{
<script type="text/javascript">
    jQuery(document).ready(function () {

        var config = {
            sensitivity: 5, // number = sensitivity threshold (must be 1 or higher)
            interval: 100, // number = milliseconds for onMouseOver polling interval
            over: Show, // function = onMouseOver callback (REQUIRED)
            timeout: 200, // number = milliseconds delay before onMouseOut
            out: Hide, //function = onMouseOut callback (REQUIRED)
            selector: '.@category.Id' // selector 
        };

        function Show() {
            //var Element = document.getElementsByClassName('Flyout-@category.Id');
            //Element.className = Element.className + " active";
            jQuery('.Flyout-@category.Id').addClass('active');
        }

        function Hide() {
            //var Element = document.getElementsByClassName('Flyout-@category.Id active');
            //Element.className = Element.className - " active";
            jQuery('.Flyout-@category.Id').removeClass('active');
        }

        $('.SubMenu').hoverIntent(config);
    });
</script>
}

<nav class="responsiveMenu">
    <input type="checkbox" id="toggle" />
    <label for="toggle" class="toggle" data-open="" data-close="" onclick></label>
    <ul class="menu">
        @foreach (var category in Model.Categories)
        {
            <li class="@category.Id">
                <a href="@Url.RouteUrl("Category", new { SeName = category.SeName })">@category.Name
                    @if (category.NumberOfProducts.HasValue)
                    {
                        <text> (@(category.NumberOfProducts.Value))</text>
                    }
                </a>
            </li>
        }
    </ul>
</nav>
